<template>
  <div>
    <el-container>
      <el-container>
        <el-aside width="200px"><NavMenu></NavMenu></el-aside>
        <el-container>
          <el-header height="40px"><Header></Header></el-header>
          <el-main >
            <!--  功能区域-->
            <div style="padding: 10px">
              <div style="margin: 10px; position: absolute;left: 210px;">
                <el-button type="primary" @click="getAll">全部</el-button>
                <el-button type="primary" @click="WhdInsert">新增</el-button>
                <el-button type="primary" @click="multiDel">批量删除</el-button>
              </div>

              <!--  搜索区域-->
              <div style="padding: 10px">
<!--                  <el-select v-model="select" placeholder="员工" style="width: 80px">-->
<!--                    <el-option label="员工" value="1"/>-->
<!--                    <el-option label="客户" value="2" />-->
<!--                  </el-select>-->
                <el-input v-model="SearchStr" placeholder="请输入关键字" style="width: 20%"></el-input>
                <el-button type="primary" style="margin: 5px" @click="selectQueryOrder">
                  <el-icon>
                    <Search/>
                  </el-icon>查询</el-button>
              </div>
            </div>
           <!--表格-->
            <div>
              <el-table
                  :data="tableData"
                  :row-key="getRowKeys"
                  style="width: 100%"
                  @selection-change="handleSelectionChange"
                  ref="multipleTable"
              >
                  <el-table-column type="selection" :reserve-selection="true"></el-table-column>
                  <el-table-column prop="no" label="订单编号" align="center" sortable> </el-table-column>
                  <el-table-column prop="workId" label="送水工编号" align="center" > </el-table-column>
                  <el-table-column prop="date" label="送水时间" align="center"> </el-table-column>
                  <el-table-column prop="customerId" label="客户编号"   align="center"> </el-table-column>
                  <el-table-column prop="num" label="送水数" align="center"> </el-table-column>
                  <el-table-column label="操作"  align="center">
                    <template #default="scope">
                    <el-button size="small" type="primary" @click="WhdModify(scope.row)">
                      <el-icon class="icon-button"><Edit/></el-icon>
                    </el-button>
                        <el-button size="small" type="primary" @click="handleDelete(scope.row)">
                          <el-icon class="icon-button"><Delete/></el-icon>
                        </el-button>
                    </template>
                </el-table-column>
              </el-table>
            </div>
            <!--    页码-->
            <div style="display:flex;justify-content:center;margin-top: 35px;">
              <el-pagination background layout="prev, pager, next"
                             :total="total" :page-size="pageSize" :page-sizes="[5, 15, 25]"
                             :current-page="pageNo" @current-change="handleCurrentChange"
              />
            </div>

            <WhdInsert ref="add" @updateData="updateData"></WhdInsert>
            <WhdModify ref="modify" @updateData="updateData"></WhdModify>
          </el-main>
        </el-container>
      </el-container>
    </el-container>

  </div>
</template>

<script>
import { Delete, Edit,Search } from '@element-plus/icons-vue'
import WhdInsert from "@/components/WhdInsert.vue";
import NavMenu from '@/components/NavMenu.vue'
import Header from '@/components/Header.vue'
import WhdModify from "@/components/WhdModify";
export default {
  name: "WhdManage",
  components: {
    NavMenu,
    Header,
    Delete,
    Edit,
    Search,
    WhdInsert,
    WhdModify
  },
  data(){
    return {
      //select:'员工',
      SearchStr:'',
      url:'',
      tableData: [],
      loading:true,
      total:0,
      pageSize:8,
      pageNO:1,
      multipleSelection: [],
    }
  },
  created() {
    this.getAllOrders();
  },
  methods: {
    //打开页面就获取Order全部信息
    getAllOrders() {
      //var that=this;
      let params = {
        pageNO: this.pageNO,
        pageSize: this.pageSize
      };
      this.axios
          .get("/Order/selectAll", {params})
          .then((response) => {
            this.tableData = response.list;
            this.total = response.total;
            console.log(response);
            this.loading = false;
          })
          .catch(function (error) {
            console.log(error);
            alert("没数据！！！")
          });
    },
    //模糊查询
    selectQueryOrder() {
      this.loading = true;
      var that = this;
      let params = {
        pageNO: this.pageNO,
        pageSize: this.pageSize,
        no: this.SearchStr,
        workId: this.SearchStr,
        customerId: this.SearchStr,
      };
      console.log(params);
      this.axios
          .get("/Order/queryOrder", {params})
          .then(response => {
            console.log("读取成功");
            console.log(response);
            that.tableData = response.list;
            that.total = response.total;
            that.loading = false;
          })
          .catch(function (error) {
            console.log(error);
          });
    },
    handleCurrentChange(pageNO) {
      this.pageNO = pageNO;
      this.getAllOrders();
    },
    //获取选中的行
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    //换页
    updateData() {
      this.loading = true;
      this.getAllOrders();
    },
    //显示全部信息，并清空搜索框
    getAll() {
      this.loading = true;
      this.getAllOrders();
      this.searchStr = "";
    },
    //批量删除
    multiDel() {
      const length = this.multipleSelection.length;
      let vals = '';
      this.multipleSelection.forEach(item => {
        console.log(item.no)
        vals += item.no + ',';
      })
      console.log("拼接后"+vals);
      if (length !== 0) {
        this.$confirm('是否确认删除这' + length + '条数据?', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          var that=this;
          var url = "/Order/multiDelete/"+vals;
          this.axios.get(url).then((response) => {
            console.log(response + "删除成功");
            that.getAllOrders();
            // that.created()
            console.log('删除成功')
          })
        })
      } else {
        console.log('未选择数据！')
      }
    },
    //实现分页多选
    getRowKeys(row) {
      return row.no; //区分数据的唯一性
    },
    //删除
    handleDelete(row) {
      console.log(row);
      let that = this;//改变this指向
      this.$confirm('是否删除此条数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        center: true
      }).then(() => {
        var url = "/Order/del/" + row.no;
        this.axios.get(url).then((response) => {
          console.log(response + "删除成功");
          that.getAllOrders();
        }).catch(function (error) {
          console.log(error);
        });
      })
    },
    //插入新订单
    WhdInsert() {
      this.$confirm('是否添加数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        center: true
      }).then(() => {
        var that = this;
        that.$refs.add.dialogShow();
      })
    },
    //根据行号获取订单信息
    WhdModify(row) {
      this.$confirm('是否更新此条数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        center: true
      }).then(() => {
        var that = this;
        that.$refs.modify.dialogShow(row.no);
      })
    },
}
}
</script>

<style scoped>
.el-header /deep/ {
  padding: 0;
}
.el-main /deep/{
  height: 300px;
}
</style>